<template>
  <div class="app-container clearfix">
    <page-nav />
    <div class="page-content" :class="{ 'content-collapse': isCollapse }">
      <page-header />
      <page-tags />
      <div class="content-box">
        <transition name="fade-page" mode="out-in">
          <router-view :key="key"></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import pageNav from "@/view/page/nav";
import pageHeader from "@/view/page/header";
import pageTags from "@/view/page/tags";
import { mapState } from "vuex";

export default {
  components: {
    pageNav,
    pageHeader,
    pageTags
  },
  data() {
    return {
      isIndex: false
    };
  },
  computed: {
    key() {
      // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
      return this.$route.fullPath;
    },
    ...mapState({
      isCollapse: state => state.app.isCollapse
    })
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.content-collapse {
  margin-left: 64px !important;
}
</style>
